<template>
  <div class="app-container">
      <div class="header">
         <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="serviceId">
               <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  show-checkbox
                  value-key="id"
                  check-strictly
                  placeholder="请选择服务区"
                  class="with-200"
                  @check="handleChange"
               />
            </el-form-item>

            <el-form-item prop="shopId">
               <el-select
                  v-model="queryParams.shopId"
                  placeholder="请选择店铺"
                  class="with-180"
                  clearable
               >
               <el-option
                  v-for="item in shopList"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                  />
               </el-select>
            </el-form-item>
            
            <el-form-item prop="type" class="with-240 date-type">
               <el-segmented v-model="queryParams.type" :options="options" block @change="handleChangeType">
                  <template #default="{ item }">
                     <div>{{ item.label }}</div>
                  </template>
               </el-segmented>
            </el-form-item>

            <el-form-item prop="visitDate" class="with-200" v-show="queryParams.type == 'day'">
               <el-date-picker
                  v-model="queryParams.visitDate"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
               />
            </el-form-item>

            <el-form-item prop="yearMonthStr" class="with-200" v-show="queryParams.type == 'month'">
               <el-date-picker
                  v-model="queryParams.yearMonthStr"
                  type="month"
                  placeholder="请选择月份"
                  value-format="YYYY-MM"
               />
            </el-form-item>

            <el-form-item prop="yearStr" class="with-200" v-show="queryParams.type == 'year'">
               <el-date-picker
                  v-model="queryParams.yearStr"
                  type="year"
                  placeholder="请选择年份"
                  value-format="YYYY"
               />
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>

         <div>
            <el-button
               type="primary"
               plain
               @click="handleSelect('chart')"
               :class="isShowChart ? 'is-active' : ''"
            >图表显示
            </el-button>
            <el-button
               type="primary"
               plain
               @click="handleSelect('table')"
               :class="!isShowChart ? 'is-active' : ''"
               >表格显示
            </el-button>
         </div>
      </div>
      <operate :queryParams="queryParams"  ref='chartRef' v-if='isShowChart'></operate>
      <table-data :queryParams="queryParams" ref='tableRef' v-else></table-data>
  </div>
</template>

<script setup>
import { getShopList } from "@/api/system/shop";
import operate from "./components/operate.vue";
import tableData from "./components/table.vue";
import useUserStore from '@/store/modules/user'
import { nextTick, ref } from 'vue';
const { proxy } = getCurrentInstance();
const tableRef = ref();
const chartRef = ref()
const queryParams = reactive({
    serviceId:"",
    shopId:"",
    type:"day",
    visitDate:null,
    yearMonthStr:null,
    yearStr:null
});

const options = [
   {label:'日',value:'day'},
   {label:'月',value:'month'},
   {label:'年',value:'year'}
]
const shopList = ref([])
const isShowChart = ref(true)
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

const getShopDataList = (isQuery = true) =>{
   getShopList({pageNum: 1,pageSize: 200,serviceId:queryParams?.serviceId}).then(response => {
      if (response.code === 200) {
         shopList.value = response?.rows || [];
         queryParams.shopId  = shopList.value[0]?.shopId;
      }
      if(isQuery){
         chartRef.value.getList();
      }
   })
}

const resetQuery = ()=> {
   proxy.resetForm("queryRef");
   setDefaultDate()
   handleQuery();
}

const handleQuery = ()=>{
   if(isShowChart.value){
      chartRef.value.getList();
   }
   else{
      tableRef.value.getList()
   }
}

const handleChangeType = (val) =>{
   if(val == "day"){
      queryParams.yearMonthStr = null;
      queryParams.yearStr = null;
      queryParams.visitDate = proxy.parseTime(new Date(),'{y}-{m}-{d}');
   }
   else if(val == "month"){
      queryParams.visitDate = null;
      queryParams.yearStr = null;
      queryParams.yearMonthStr = proxy.parseTime(new Date(),'{y}-{m}');
   }
   else if(val == "year"){
      queryParams.visitDate = null;
      queryParams.yearMonthStr = null;
      queryParams.yearStr = proxy.parseTime(new Date(),'{y}');
   }
}

//选择服务区
const handleChange = (item,node) =>{
   queryParams.shopId  = "";
   queryParams.serviceId = item.id;
   getShopDataList(false);
}

const handleSelect = (type) => {
   isShowChart.value = type === "chart" ? true : false;
   if(type === "chart") {
      nextTick(()=>{
         chartRef.value.getList();
      })
   }
}

const setDefaultDate = () =>{
   queryParams.visitDate = proxy.parseTime(new Date(),'{y}-{m}-{d}');
   queryParams.serviceId  = deptTreeData.value[0]?.children[0]?.id;
   queryParams.shopId  = shopList.value[0]?.shopId;
}
const disabledDate = (time) =>{
   return time.getTime() > Date.now();
}
setDefaultDate();
getShopDataList();
</script>
<style lang="scss" scoped>
  .app-container{
   height: calc(100vh - 84px);
   .header{
      display: flex;
      justify-content: space-between;
      .el-form{
         flex:1
      }
      .date-type{
         .el-form-item__content{
            width: 100%;
            .is-block{
               width: 100%;
            }
         }
      }
   }
   .is-active{
      background-color: var(--el-button-active-bg-color);
   }
   .el-button:active{
      background: var(--el-color-primary-light-9);
   }
  }
  
</style>
